/*
 * @Author: xiaosihan 
 * @Date: 2021-04-24 22:37:03 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 13:15:03
 */

import React from "react";
import * as THREE from "three";
import { Texture } from "three";
import { ExtrudeMesh, Group3D } from "xsh-react-three";
import MyController from "../MyController/MyController";
import Matrix4Mesh from "./Matrix4Mesh/Matrix4Mesh";
import Muntain from "./Muntain/Muntain";
import roadPNG from "./road1.png";


interface Props { }

interface State {
    reactIconTexture?: Texture;
}

export default class ExtrudeMeshDemo extends Group3D<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
    };

    async componentDidMount() {
        const { textureLoader } = this.context;

        textureLoader.load(roadPNG, texture => {
            Object.assign(texture, {
                wrapS: THREE.RepeatWrapping,
                wrapT: THREE.RepeatWrapping,
                version: 2
            });

            this.setState({ reactIconTexture: texture });
        });

    }

    beforeRender() {
        if (this.state.reactIconTexture) {
            this.state.reactIconTexture.offset.x -= 0.01;
        }
    }

    componentWillUnmount() {
        if (this.state.reactIconTexture) {
            this.state.reactIconTexture.dispose();
        }
    }

    render() {

        const { reactIconTexture } = this.state;

        return (
            <>
                {/* 控制器和相机 */}
                <MyController />

                {/* 单位矩阵 */}
                <Matrix4Mesh />

                {/* 山 */}
                <Muntain />

                {/* 挤出模型制作的公路模型 */}
                <ExtrudeMesh
                    duration={500}
                    castShadow={true}
                    name="road1"
                    position={{ y: 1 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    map={reactIconTexture}
                    closed={true}
                    wireframe={false}
                    shapePath={[
                        [-0.2, 0.05],
                        [-0.2, 0],
                        [0.2, 0],
                        [0.2, 0.05],
                    ]}
                    paths={[
                        {
                            vector3: [0, 0, 0],
                            name: "第一个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 0.3, y: 1 },
                        },
                        {
                            vector3: [2, -0.2, -2],
                            name: "第二个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [0, -0.2, -4],
                            name: "第三个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [-2, -0.2, -6],
                            name: "第四个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [0, 0, -8],
                            name: "第五个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [2, 0.2, -6],
                            name: "第六个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [0, 0.2, -4],
                            name: "第七个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },
                        {
                            vector3: [-2, 0.2, -2],
                            name: "第八个路口",
                            radius: 1,
                            segments: 100,
                            scale: { x: 1, y: 1 },
                        },

                    ]}
                />


            </>
        )
    }
}